<template>
  <view class="propertyPhone">
    <uni-popup ref="propertyPhone" type="bottom" background-color="#fff">
      <view class="popup-content">
        <view class="downs" @click="bindClose($event, 1)">
          <view class="downs-btn"></view>
          <view class="title">联系物业</view>
        </view>
        <view class="phoneList" v-for="(item, index) in list" :key="index">
          <view :class="['phoneList_item', index == 0 ? 'noBorder' : '']">
            <view class="left">
              <view class="circle">
                {{ item.userName.substring(item.userName.length - 2) }}
              </view>
              <view class="name">{{ item.userName }}</view>
            </view>
            <image
              src="@/static/images/phone2.png"
              mode=""
              class="right"
              @click.stop="handleCall(item)"
            />
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
	props: {
		list: {
			type: Array,
		},
	},
	data() {
		return {};
	},
	methods: {
		bindClose() {
			this.$emit('bindClose');
		},
		handleCall(item) {
			uni.makePhoneCall({
				phoneNumber: item.phone,
			});
		},
	},
};
</script>

<style lang="scss" scope>
.propertyPhone {
  .popup-content {
    max-height: 630rpx;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 20rpx 40rpx;
    background-color: #fff;
    border-radius: 8rpx 8rpx 0rpx 0rpx;
  }
  .title {
    padding: 18rpx 0 40rpx 0;
    font-size: 32rpx;
    color: #333;
    font-weight: 500;
  }
  .downs {
    width: 100%;

    .downs-btn {
      width: 64rpx;
      height: 10rpx;
      background: #d8d8d8;
      border-radius: 6rpx;
      margin: 0 auto;
    }
  }
  .phoneList_item {
    display: flex;
    justify-content: space-between;
    padding: 33rpx 0;
    border-top: 2rpx solid #eeeeee;
    font-size: 26rpx;
    .left {
      display: flex;
      align-items: center;
      .name {
        margin-left: 18rpx;
      }
    }
    .circle {
      width: 48rpx;
      height: 48rpx;
      border-radius: 50%;
      background: #0091ff;
      color: #fff;
      font-size: 20rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .right {
      width: 48rpx;
      height: 48rpx;
    }
  }
  .noBorder {
    border: none;
  }
}
</style>
